<template>
	<div  class="body-bg">
		<div class="login-main">
			<h2 class="site-title">{{site_title}}</h2>
			<el-form ref="login" :model="login" size="medium" :rules="loginRules" class="login-form" label-position="left" >
				<el-form-item style="margin-bottom:18px;" prop="username">
					<el-input v-model="login.username"  type="text" placeholder="用户名" prefix-icon="el-icon-user" autocomplete="off" clearable />
				</el-form-item>
				<el-form-item style="margin-bottom:18px;" prop="password">
					<el-input v-model="login.password"  type="text" placeholder="密码" prefix-icon="el-icon-lock" @keyup.enter.native="handleLogin" autocomplete="off" clearable show-password/>
				</el-form-item>
				<el-form-item style="margin-bottom:18px;" prop="verify">
					<el-col :span="13">
						<el-input v-model="login.captcha"  type="text" placeholder="验证码" prefix-icon="el-icon-picture" @keyup.enter.native="handleLogin" autocomplete="off" clearable/>
					</el-col>
					<el-col :span="11">
						<el-image :src="verifySrc"  alt="验证码" title="点击刷新验证码" @click="refeshVerifySrc" style="width:108px;height:35px; margin-top:3px;float:right" />
					</el-col>
				</el-form-item>
			</el-form>
			<el-button :loading="loading" size="small"  type="primary" style="width:100%;" @click.native.prevent="handleLogin">
				<span v-if="!loading">登 录</span>
				<span v-else>登 录 中...</span>
			</el-button>
		</div>
	</div>
	</template>
	
	<script>
	export default {
	  data: function() {
			return {
				loading: false,
				login:{
					username:'',
					password:'',
					captcha:'',
					captcha_id:'',
				},
				site_title:'',
				success_url:'',
				loginRules: {
					username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
					password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
					captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
				},
				verify_status:true,
				verifySrc:'',
			}
		},
		mounted(){
			this.captch()
		},
		methods:{
			captch(){
				this.$axios.post('/admin/Login/verify').then(res => {
					if(res.data.status == 200){
						this.site_title = res.data.data.site_title
						this.success_url = res.data.data.success_url
						this.verifySrc = res.data.data.captcha.base64
						this.login.captcha_id = res.data.data.captcha.key
						this.verify_status = res.data.data.verify_status
					}else{
						this.$message.error('验证码获取失败!')
					}
				})
			},
			refeshVerifySrc() {
				this.captch()
			},
			handleLogin(){
				this.$refs['login'].validate(valid => {
					if(valid){
						this.loading = true
						this.$store.dispatch('login',this.login).then(()=>{
							this.$router.push(this.success_url)
							this.loading = false
						}).catch(() => {
							this.loading = false
							this.captch()
						})
					}
				})
			}
		},
	}
	</script>
	
	<style scoped>
	  .body-bg{
		position: absolute;
		height: 100%;
		width: 100%;
		top:0;
		left: 0;
		overflow-y: auto;
		background:url(../../../assets/images/denglu.jpg) top center;
		align-items: center;
		background-size: cover;
	  }
	
	  .login-main{
		z-index: 1;
		background-color: #FFF;
		border-radius: 1em;
		border: 1px solid #fff;
		width: 320px;
		margin: 150px auto;
		padding: 10px 20px 30px 20px;
	  }
	
	  .site-title{
		font-weight: bold;
		font-size: 18px;
		text-align: center;
		color:#707070;
		margin-bottom: 20px;
		padding-top: 30px;
	  }
	
	
	</style>